.lister-select {
    position: relative;
    .lister-input-wrapper {
      cursor: pointer;
      &:hover {
        input {
          border-color: $primary !important;
        }
      }
    }
    input {
      &[readonly] {
        background-color: $input-bg;
        border-color: $input-border-color;
        cursor: pointer;
        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
  
      }
      &:disabled {
        background-color: $input-disabled-bg;
        border-color: $input-disabled-border-color;
        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
        cursor: not-allowed;
      }
    }
    .icon-wrapper {
      transition: transform .25s ease-in-out;
      transform: rotate(0deg) !important;
    }
  }
  
  .lister-select.menu-is-open {
    .icon-wrapper {
      transform: rotate(180deg) !important;
    }  
  }
  
  .lister-select-dropdown {
    list-style:none;
    padding-left: 0;
    white-space: nowrap;
    position: absolute;
    background: $white;
    z-index: 100;
    top: calc(100% + 8px);
    left: 0;
    border: $menu-border-width solid $menu-border-color;
    box-shadow: $submenu-box-shadow;
    width: 100%;
    .lister-select-item {
      padding: $menu-item-padding-y $menu-item-padding-x;
      cursor: pointer;
      transition: $menu-transition;
      color: $body-color;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.is-selected {
        color: $menu-item-active-color ;
        font-weight: $font-weight-bold;
      }
      &.is-disabled {
        color: $menu-item-disabled-color;
        pointer-events: none;
        cursor: default;
      }
      &:hover {
        background-color: rgba($primary, .1);
      }
    }
  }
  
  .lister-selected-tags {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .lister-tag {
      height: 80%;
      padding: 2px 5px;
      box-sizing: border-box;
      border: 1px solid rgba($primary, .2);
      margin-left: 6px;
      border-radius: 3px;
      color: $primary;
      background-color: rgba($primary, .1);
    }
    .lister-icon {
      margin-left: 3px;
      cursor: pointer;
      &:hover {
        color: darken($primary, 10%)
      }
    }
  }